<template>
  <div class="home">
    <mu-row>
      <mu-col width="100" desktop="100">
        <div class="notice">
          商家名称：{{shopInfo.shopName}}<br>
          联系方式：{{shopInfo.shopContact}}<br>
          公告：{{shopInfo.shopNotice}}<br>
        </div>
        <div class="goods">
          <mu-paper class="content-card" :zDepth="3">
            <mu-text-field label="手机号" class="form-item" v-model="jiema.phone" style="width: 93%"
                           hintText="请输入获取的手机号"/>
            <br/>
          </mu-paper>
          <mu-raised-button label="开始获取" style="background-color: #18a716" @click="startGet" primary fullWidth/>
          <mu-card class="message-area">
            <mu-card-title subTitle="短信内容"/>
            <mu-card-text>
              {{message}}
            </mu-card-text>
          </mu-card>
        </div>
      </mu-col>
    </mu-row>
  </div>
</template>

<script>
  import {alipay, wxpay, getGoodsType, getGoodsByTypeId, getShopInfo, getGoodsInfo, getMessage} from "../api/api";

  export default {
    computed:{

    },
    data() {
      return {
        dialog: false,
        bottomSheet: false,
        message: '',
        jiema: {
          phone: '',
          account_id: this.$store.state.accountId,
        },
        shopInfo: {}
      }
    },
    methods: {

      startGet() {
        let params = {
          phone: this.jiema.phone,
          account_id: this.$store.state.accountId
        }
        if (this.jiema.phone === '' || this.jiema.account_id === null) {
          alert("请输入手机号！")
          return false;
        }
        let time = 1
        this.message = "开始第" + time + "次获取...."
        let goon = false
        getMessage(params).then(res => {
          //this.message = res.data.msg


          if (res.data.status === 700017) {
            let _indo = setInterval(() => {
              time += 1
              if (time === 60) {
                clearInterval(_indo)
              }
              this.message = "开始第" + time + "次获取...."
              getMessage(params).then(res => {

                if (res.data.status === 0) {
                  this.message = res.data.data
                  clearInterval(_indo)
                }
              })
            }, 3000);
          }
          if (res.data.status === 0) {
            this.message = res.data.data
          }
        })
      },
      close() {
        this.dialog = false
      },
      getShopInfo() {
        let params = {
          account_id: this.$store.state.accountId
        }
        getShopInfo(params).then(res => {
          if (res.data.data) {
            this.shopInfo = res.data.data
          }
        })
      }
    },
    mounted() {
      if (this.$route.params.accountId) {
        this.$store.commit('SET_ACCOUNTID', this.$route.params.accountId)
      }
      this.getShopInfo()

    }
  }
</script>

<style scoped>
  .home {
    margin-bottom: 60px;
    /*background: rgb(211, 168, 9);*/
  }

  /* @media (min-width: 993px) {
     .row .desktop-50 {
       !*display: flex;*!
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }

   }*/

  .slider {
    margin: 8px;
  }

  .form-item {
    margin: 10px;
  }

  .notice {
    /*color: black;*/
    background: #18a716;
    margin: 5px;
    padding: 8px;
  / / border: 1 px solid blue;
    border-radius: 5px;
    color: white;
  }

  .mu-appbar-title {
    display: flex !important;
  }

  .goods {

    /*background: rgb(211, 168, 9);*/
    padding: 5px;
  }

  .card-title {
    height: 40px;
    background: rgba(0, 0, 0, .38);
    border-radius: 2px;
    line-height: 40px;
    padding-left: 10px;
    color: rgb(255, 255, 255)
  }

  .content-card {
    margin-bottom: 10px;
    padding-bottom: 20px;
    border: 1px solid #18a716;
    border-radius: 5px;
    /*height: 300px;*/
    /*display: flex;*/
    /*width: 95%;*/
  }

  .fix-bottom {
    position: fixed !important;
    bottom: 0px;
  }

  .message-area {
    margin-top: 10px;
  }
</style>
